<template>
  <div class="modalsupp">
    <!-- 供应商-对话框 -->
    <el-dialog
      title="选择供应商"
      :visible.sync="dialogSupp"
      append-to-body
      width="40%">
      <el-form :model="suppForm" ref="suppForm" size="medium" class="flex-s">
        <el-form-item prop="supp_type">
          <el-select v-model="suppForm.supp_type" placeholder="选择供应商类别" style="width: 100%;">
            <el-option value="0" label="aa"></el-option>
            <el-option value="1" label="bb"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keywords">
          <el-input v-model="suppForm.keywords" placeholder="输入编号/名称/联系人/电话查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="search">查 询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <div class="bank-form">
        <div class="form-item">
          <el-table
            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            class="table"
            stripe border
            :header-cell-style="{background:'#f3f3f3'}"
            ><!--:data="用于存放请求数据回来的数组" -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="sort" label="类别" width="120">
            </el-table-column>
            <el-table-column prop="supp_no" label="编号" width="160">
            </el-table-column>
            <el-table-column prop="name" label="名称" width="120">
            </el-table-column>
            <el-table-column prop="contact" label="联系人" width="120">
            </el-table-column>
            <el-table-column prop="phone" label="手机" width="160">
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页-页码 -->
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length">
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogSupp = false">取 消</el-button>
        <el-button type="primary" @click="dialogSupp = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'ModalSupp',
    props:{
    },
    data() {
      return {
        dialogSupp: false, //供应商对话框
        currentPage: 1, //当前页码
        pagesize: 5,    //每页的数据条数
        tableData: [], //表格数据
        suppForm: {
          supp_type: '',
          keywords: ''
        }
      }
    },
    created() {
    },
    methods:{
      //打开对话框
      openSupp() {
        this.dialogSupp = true;
      },
      // 查询
      search () {
        this.$refs['suppForm'].validate(valid => {
          if (valid) {
            console.log(this.suppForm)
            this.$message.success('保存成功')
          } else {
            this.$message.error('表单验证失败!')
          }
        })
      },

      //每页条数改变时触发事件,选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pagesize = val;
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      }
    }
  }
</script>

<style>
</style>
